<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>轮播图jq</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            position: relative;
        }

        .box {
            width: 520px;
            height: 280px;
            margin: 200px auto;
            position: relative;
            background-color: red;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

        li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .current {
            display: block;
        }

        section {
            width: 150px;
            height: 20px;
            margin: 0 auto;
            position: absolute;
            top: 250px;
            left: 200px;
            display: flex;
            justify-content: space-around;
        }

        section span {
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
            box-shadow: slategray;
        }
        .yuan {
            background-color: red;
        }
        .img-click span {
            width: 30px;
            height: 50px;
            line-height: 40px;
            background-color: pink;
            position: absolute;
            text-align: center;
            top: 120px;
              display: none;  
        }
        .prev {
            left: 0;
        }
        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <!-- (li>a[href]>img[src=img/$$.jpg])*5 -->
            <li class="current"><a href=""><img src="img/01.jpg" alt=""></a></li>
            <li><a href=""><img src="img/02.jpg" alt=""></a></li>
            <li><a href=""><img src="img/03.jpg" alt=""></a></li>
            <li><a href=""><img src="img/04.jpg" alt=""></a></li>
            <li><a href=""><img src="img/05.jpg" alt=""></a></li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        <section>
            <span class="yuan"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </section>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    var index = 0;
    // --------------点击按钮---------------
    function prevImg() {
        index = index == 0 ? $('li').length - 1 : index - 1;
        show();
    }
    function nextImg() {
        index = index == $('li').length - 1 ? 0 : index + 1;
        show();
    }
    //-----------------轮播图自动播放---------------
    function show() {
        $('li').removeClass('current')
            .eq(index).addClass('current');
        $('section>span').removeClass('yuan')
            .eq(index).addClass('yuan');
    }
    var timer = setInterval(nextImg, 1000);
   
    $('section>span').mouseenter(function () {
        clearInterval(timer);
        timer = null;
        index = $(this).index();
        show();
    });
    $('section>span').mouseout(function () {
        if (timer != null) {
            return;
        }
        timer = setInterval(nextImg, 1000);
    });

    $('.box').mouseover(function () {
        clearInterval(timer);
        // console.log('进来');
        timer = null;
        $('.prev').css('display','block');
        $('.next').css('display','block');
    });
    $('.box').mouseout(function () {
        if (timer != null) {
            return;
        }
        $('.prev').css('display','none');
        $('.next').css('display','none');
        timer = setInterval(nextImg, 1000);
    });

    $('.prev').click(function () {
        prevImg();
        // ev.stopPropagation();
    });
    $('.next').click(function () {
        nextImg();
        // ev.stopPropagation();
    });

</script>